<template>
  <el-main style="background-color:#ffffff;">
    <el-row :gutter="10" style="height: 100%">
      <el-col :span="5" class="myclass">
        <el-card class="box-card">
          <div slot="header">
            <span>用电总消耗(kWh)</span>
          </div>
          <div id="today" style="width:330px;height:250px;"></div>
          <div id="month" style="width:330px;height:250px;"></div>
          <div id="year" style="width:330px;height:250px;"></div>
        </el-card>
      </el-col>

      <el-col :span="14">
        <el-card class="box-card">
          <div slot="header" style="text-align: center">
            <span>水土工业园地图</span>
          </div>
          <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px"
                     @click="getClickInfo" :scroll-wheel-zoom='true'>
          </baidu-map>
        </el-card>
      </el-col>

      <el-col :span="5">
        <el-card class="box-card">
          <el-card class="box-card ">
            <div slot="header">
              <span>水总消耗(T)</span>
            </div>
            <div id="water" style="width:330px;height:220px;"></div>
          </el-card>
          <el-card class="box-card ">
            <div slot="header">
              <span>燃气总用量(Nm3)</span>
            </div>
            <div id="gas" style="width:330px;height:220px;"></div>
          </el-card>
          <el-card class="box-card">
            <div slot="header">
              <span>制冷总量(T)</span>
            </div>
            <div id="cold" style="width:330px;height:220px;"></div>
          </el-card>
        </el-card>
      </el-col>

    </el-row>
  </el-main>
</template>

<script>

  import MapPage from "../home/components/map";

  export default {
    components: {
      MapPage
    },
    data() {
      return {
        center: {lng: 106.516405, lat: 29.627049},
        zoom: 13
      }
    }, methods: {

      handler({BMap, map}) {
        var point = new BMap.Point(106.516405, 29.627049)
        map.centerAndZoom(point, 13)
        var marker = new BMap.Marker(point) // 创建标注
        map.addOverlay(marker) // 将标注添加到地图中
        var circle = new BMap.Circle(point, 6, {
          strokeColor: 'Red',
          strokeWeight: 6,
          strokeOpacity: 1,
          Color: 'Red',
          fillColor: '#f03'
        })
        map.addOverlay(circle)
      },
      getClickInfo(e) {
        console.log(e.point.lng)
        console.log(e.point.lat)
        this.center.lng = e.point.lng
        this.center.lat = e.point.lat
      }

    }, mounted() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('today'));

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '今日耗电量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          bottom: 20,
          data: ['厂房A', '厂房B', '行政楼', '重要设备']
        },
        series: [
          {
            name: '用电量',
            type: 'pie',
            radius: ['20%', '50%'],
            center: ['50%', '40%'],
            data: [
              {value: 3.33, name: '厂房A'},
              {value: 3.15, name: '厂房B'},
              {value: 3.05, name: '行政楼'},
              {value: 3.81, name: '重要设备'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: true,
                padding: [0, 0],
                formatter: '{a}: {c} \n 占比:({d}%)'
              }
            },
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);


      //本月
      // 基于准备好的dom，初始化echarts实例
      const myChart1 = this.$echarts.init(document.getElementById('month'));

      // 指定图表的配置项和数据
      let option1 = {
        title: {
          text: '本月耗电量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          bottom: 20,
          data: ['厂房A', '厂房B', '行政楼', '重要设备']
        },
        series: [
          {
            name: '用电量',
            type: 'pie',
            radius: ['20%', '50%'],
            center: ['50%', '40%'],
            data: [
              {value: 100.5, name: '厂房A'},
              {value: 80.58, name: '厂房B'},
              {value: 101.5, name: '行政楼'},
              {value: 90.55, name: '重要设备'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: true,
                padding: [0, 0],
                formatter: '{a}: {c} \n 占比:({d}%)'
              }
            },
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);


      // 基于准备好的dom，初始化echarts实例
      const myChart2 = this.$echarts.init(document.getElementById('year'));

      // 指定图表的配置项和数据
      let option2 = {
        title: {
          text: '本年耗电量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          bottom: 20,
          data: ['厂房A', '厂房B', '行政楼', '重要设备']
        },
        series: [
          {
            name: '用电量',
            type: 'pie',
            radius: ['20%', '50%'],
            center: ['50%', '40%'],
            data: [
              {value: 3.33, name: '厂房A'},
              {value: 3.15, name: '厂房B'},
              {value: 3.05, name: '行政楼'},
              {value: 3.81, name: '重要设备'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: true,
                padding: [0, 0],
                formatter: '{a}: {c} \n 占比:({d}%)'
                // formatter: function (params) {
                //     return  "用电量:"+params.value +"\n"+
                //         "占比:"
                // }
              }
            },
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option2);


      // 基于准备好的dom，初始化echarts实例
      const myChart3 = this.$echarts.init(document.getElementById('water'));

      // 指定图表的配置项和数据
      let option3 = {
        tooltip: {
          trigger: 'axis',
          formatter: '',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          bottom: 0,
          data: ['厂房A', '厂房B', '行政楼', '重要设备']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['今日', '本月', '本年']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '厂房A',
            type: 'bar',
            barWidth: 35,
            stack: '总量',
            data: [8.3, 25.5, 280]
          },
          {
            name: '厂房B',
            type: 'bar',
            stack: '总量',
            data: [8.5, 30.5, 260]
          },
          {
            name: '行政楼',
            type: 'bar',
            stack: '总量',
            data: [8.7, 24.5, 250]
          },
          {
            name: '重要设备',
            type: 'bar',
            stack: '总量',

            data: [9.2, 35.6, 280]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart3.setOption(option3);


      // 基于准备好的dom，初始化echarts实例
      const myChart4 = this.$echarts.init(document.getElementById('gas'));

      // 指定图表的配置项和数据
      let option4 = {
        tooltip: {
          trigger: 'axis',
          formatter: '',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          bottom: 0,
          data: ['厂房A', '厂房B', '行政楼', '重要设备']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['今日', '本月', '本年']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '厂房A',
            type: 'bar',
            barWidth: 35,
            stack: '总量',
            data: [8.3, 25.5, 280]
          },
          {
            name: '厂房B',
            type: 'bar',
            stack: '总量',
            data: [8.5, 30.5, 260]
          },
          {
            name: '行政楼',
            type: 'bar',
            stack: '总量',
            data: [8.7, 24.5, 250]
          },
          {
            name: '重要设备',
            type: 'bar',
            stack: '总量',
            data: [9.2, 35.6, 280]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart4.setOption(option4);


      // 基于准备好的dom，初始化echarts实例
      const myChart5 = this.$echarts.init(document.getElementById('cold'));

      // 指定图表的配置项和数据
      let option5 = {
        tooltip: {
          trigger: 'axis',
          formatter: '',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          bottom: 0,
          data: ['厂房A', '厂房B', '行政楼', '重要设备']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['今日', '本月', '本年']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '厂房A',
            type: 'bar',
            barWidth: 35,
            stack: '总量',
            data: [8.3, 25.5, 280]
          },
          {
            name: '厂房B',
            type: 'bar',
            stack: '总量',
            data: [8.5, 30.5, 260]
          },
          {
            name: '行政楼',
            type: 'bar',
            stack: '总量',
            data: [8.7, 24.5, 250]
          },
          {
            name: '重要设备',
            type: 'bar',
            stack: '总量',
            data: [9.2, 35.6, 280]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart5.setOption(option5);


    }
  }
</script>

<style lang="scss" scoped>

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    height: 100%;
  }

  .el-col {
    height: 100% !important;
  }

  .el-container {
    height: 100% !important;
  }

  .el-card {
    height: 100% !important;
  }


</style>

<style>
  .el-card__header {
    padding: 10px 10px !important;
  }

  .myclass .el-card__body {
    height: 260px;
    padding: 0;
  }


  .el-card__body {
    padding: 0px !important;
  }
</style>